<template>
  <div>
    <span
      class="item"
      @click="spanClick('all')"
      :class="{ active: value === 'all' }"
      >All</span
    >
    <span
      class="item"
      @click="spanClick('active')"
      :class="{ active: value === 'active' }"
      >Active</span
    >
    <span
      class="item"
      @click="spanClick('completed')"
      :class="{ active: value === 'completed' }"
      >Completed</span
    >
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
      validator: value => {
        const arr = ['all', 'active', 'completed']
        return arr.includes(value)
      }
    }
  },
  methods: {
    spanClick (str) {
      this.$emit('input', str)
    }
  }
}
</script>
<style scoped>
.item {
  padding: 6px;
  margin: 0 10px;
  cursor: pointer;
}
.active {
  border: 1px solid pink;
}
</style>
